import useAuthStore from '@/store/authStore';
import '@/styles/ComponentMarket.scss';
import { DownOutlined } from '@ant-design/icons';
import { Button, Dropdown, Input, Menu } from 'antd';
import axios from 'axios';
import React, { useEffect, useState } from 'react';

const { Search } = Input;

const modelCategories = [
  '全部', '语音识别', '语音合成', '语音扩展', '人脸识别',
  '文本识别', '图像识别', '基础任务', '模型类别', '模型类别', '模型类别'
];

const ModelShowcase: React.FC = () => {
  const { accessToken } = useAuthStore(); // 使用 useAuthStore 获取 access_token
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [access_token, setAccessToken] = useState<string | null>(null);

  useEffect(() => {
    setAccessToken(accessToken);
    console.log("Access token updated:", accessToken);
  }, [accessToken]);

  const handleCategoryClick = (category: string) => {
    setSelectedCategory(category);
  };

  const handleCreateAppClick = async () => {
    console.log('Create App button clicked');
    console.log('Access token:', access_token);

    const headers = {
      'Authorization': `Bearer ${access_token}`,
      'Cache-Control': 'no-cache',
      'Accept': '*/*',
    };

    try {
      const whoamiResponse = await axios.get('http://localhost:3000/api/v1/users/whoami', { headers });
      console.log('whoami response:', whoamiResponse.data);

      const foldersResponse = await axios.get('http://localhost:7860/api/v1/folders/', { headers });
      console.log('folders response:', foldersResponse.data);

      const variablesResponse = await axios.get('http://localhost:7860/api/v1/variables/', { headers });
      console.log('variables response:', variablesResponse.data);

      const flowsResponse = await axios.get('http://localhost:7860/api/v1/flows/', { headers });
      console.log('flows response:', flowsResponse.data);

      const storeCheckResponse = await axios.get('http://localhost:7860/api/v1/store/check/', { headers });
      console.log('store check response:', storeCheckResponse.data);

      const apiKeyCheckResponse = await axios.get('http://localhost:7860/api/v1/store/check/api_key', { headers });
      console.log('API key check response:', apiKeyCheckResponse.data);
    } catch (error) {
      console.error('Error calling APIs:', error);
    }
  };

  const menu = (
    <Menu>
      {modelCategories.slice(8).map((category, index) => (
        <Menu.Item key={index} onClick={() => handleCategoryClick(category)}>
          {category}
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <div className="component-market">
      <div className='top-menu'>
        <h1>模型广场</h1>
        <div className="search-bar">
          <p style={{ margin: '0 0' }}>排序：最热 ▼</p>
          <p style={{ margin: '0 1.25rem' }}>筛选：全部 ▼</p>
          <Search placeholder="搜索模型关键词" style={{ width: 240 }} />
          <Button type="primary" className='start-chat-button' onClick={handleCreateAppClick}>创建应用</Button>
        </div>
      </div>
      <div className="category-menu">
        {modelCategories.slice(0, 10).map((category, index) => (
          <Button
            key={index}
            type={selectedCategory === category ? 'primary' : 'default'}
            style={{ borderColor: 'white', borderRadius: '0rem' }}
            onClick={() => handleCategoryClick(category)}
          >
            {category}
          </Button>
        ))}
        <Dropdown overlay={menu}>
          <Button style={{ borderColor: 'white', borderRadius: '0rem' }}>
            更多 <DownOutlined />
          </Button>
        </Dropdown>
      </div>
    </div>
  );
};

export default ModelShowcase;
